<script setup>
import DetailHeader from '@/components/DetailHeader.vue'
import { userOneQuestionService } from '@/api/question/index.js'
import NavBar from '@/components/NavBar.vue'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
const questionDetail = ref()
const route = useRoute()
onMounted(async () => {
  try {
    const response = await userOneQuestionService(route.query.id)
    questionDetail.value = response.data.data
  } catch (error) {
    console.error('Failed to fetch article:', error)
  }
})
</script>
<template>
  <NavBar name="课件需求"></NavBar>
  <DetailHeader
    v-if="questionDetail"
    :object="questionDetail"
    type="需求"
  ></DetailHeader>
  <div v-if="questionDetail" class="content">
    {{ questionDetail.question.content }}
  </div>
</template>
<style scoped>
.content {
  margin-top: 0.75rem; /* 相当于 mt-3 */
  max-width: 65ch; /* 默认的 prose 宽度 */
  line-height: 1.75; /* 默认的 prose 行高 */
  font-size: 1rem; /* 默认的 prose 字体大小 */
  color: #333; /* 默认的 prose 文字颜色 */
}
</style>
